<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <h2>
                        准驾车型
                    </h2>
                </div>
            </template>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form :model="form">
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="添加车型">
                                    <el-input v-model="form.carType" placeholder="请输入车型名称" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4" :offset="0">
                                <el-form-item>
                                    <el-button type="success" @click="handleAdd">点击添加</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-col>

                <el-col :span="12" :offset="0">
                    <el-form :model="formInline">
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="车型">
                                    <el-input v-model="formInline.carType" placeholder="请输入搜索名称" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="4" :offset="0">
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">查询</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </el-col>

            </el-row>

            <el-divider />
            <el-table :data="tableData" stripe style="width: 100%" border row-key="objectId"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ backgroundColor: '#f2f2f2', textAlign: 'center' }">
                <el-table-column type="index" label="序号" width="150" />
                <el-table-column label="准考车型" prop="carType" />
                <el-table-column label="开启业务">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isopen" :active-value="true" :inactive-value="false" @change="">
                        </el-switch>

                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleJump(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无准考车型" />
                </template>
            </el-table>
            <el-dialog v-model="dialogFormVisible" title="修改准考车型" draggable>
            </el-dialog>

            <div class="pagination" v-if="tableData.length">
                <el-pagination :page-sizes="[5, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="5" />
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { SchoolType } from '../../types/dapao-school';
import { CarTypeGet, CarTypePost } from '../../api/car';
import { CarType } from '../../types/car';
import { cloneDeep } from 'lodash';


// 分页总数
const total = ref<number>(0)
const Pagesize = ref<number>(5)

// 控制
const dialogFormVisible = ref(false)

const formInline = reactive({
    carType: '',
})
const form = reactive({
    carType: '',
})
const tableData = ref<CarType[]>([])
// 获取后端数据
let res = await CarTypeGet()
tableData.value = res.data.results
total.value = res.data.count

// 查询
const onSubmit = async () => {
    let obj = cloneDeep(formInline)
    let res = await CarTypeGet(1, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}


//传给组件的数据
// let Info = reactive({}) as ProcessType


// 控制弹窗
const handleJump = (val: any) => {
    dialogFormVisible.value = true
    console.log(val);

}


// 新增数据
const handleAdd = async () => {
    await CarTypePost({ ...form, isopen: true })
    ElMessage.success("新增车型成功")
    if (tableData.value.length < 5) {
        tableData.value.push({ ...form, isopen: true })
    }
    total.value += 1
}
// 删除数据
const handleDel = (i: number, val: SchoolType) => {
    console.log(i, val);

    ElMessageBox.confirm(
        '你确定要悄悄删除维修记录吗?',
        '警告提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            ElMessage({
                type: 'success',
                message: '删除成功,快跑',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '怂*,  点了不敢删',
            })
        })

}


// 分页

// 一页显示多少条
const handleSizeChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await CarTypeGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val
}
// 点击分页
const handleCurrentChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await CarTypeGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

</script>

<style scoped lang="scss">
div {
    color: #666;
}

h2 {
    color: #666;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid #00aeff;
    margin-bottom: 10px;
}

.pagination {
    margin-top: 15px;

}
</style>